<template>
  <div class="info">
    <el-card>
    <div style="margin-top: 10px" class="btn">
      <div class="delete">
        <el-button @click="deleteBySelected()" type="primary">批量删除</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>
      <div class="query">
        <el-input
          placeholder="请输入关键词搜索"
          class="searchName"
          v-model="searchName"
          id="query"
          icon="el-icon-search"
          @input="query(searchName)"
        ></el-input>
        <el-button @click="export2Excel" type="primary">导出人员信息</el-button>
      </div>
    </div>
    <el-table
      ref="multipleTable"
      tooltip-effect="dark"
      border
      :data="
      tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      @selection-change="handleSelectionChange"
      style="width: 100%;"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="工号" prop="teaid" sortable></el-table-column>
      <el-table-column label="姓名" prop="teaname" sortable></el-table-column>
      <el-table-column label="性别" prop="teasex" sortable></el-table-column>
      <el-table-column label="账号密码" prop="passwd"></el-table-column>
      <el-table-column label="电话" prop="teatel"></el-table-column>
      <el-table-column label="单位" prop="dept"></el-table-column>
      <el-table-column label="银行卡号" prop="cashcardid"></el-table-column>
      <el-table-column label="家庭地址" prop="teaadd"></el-table-column>
      <el-table-column fixed="right">
        <template slot="header" slot-scope="scope">操作</template>
        <!-- <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>-->
        <template slot-scope="scope">
          <el-button
            size="medium"
            type="primary"
            @click="dialogFormVisible = true,handleEdit(scope.$index, scope.row)"
            style="height:25px"
          >编辑</el-button>
          <!-- Form -->

          <el-button
            size="medium"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            icon="el-icon-delete"
            style="height:25px"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="operate">
      <!-- <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> -->
      <div class="page">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        ></el-pagination>
      </div>
    </div>
    <el-dialog title="教师信息" :visible.sync="dialogFormVisible" customClass="customWidth">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="工号" prop="teaid">
          <el-input v-model="ruleForm.teaid" id="teaid" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="teaname">
          <el-input v-model="ruleForm.teaname" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="teasex">
          <el-select v-model="ruleForm.teasex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账号密码" prop="passwd">
          <el-input v-model="ruleForm.passwd" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="teatel">
          <el-input v-model="ruleForm.teatel" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="单位" prop="dept">
          <el-select v-model="ruleForm.dept" filterable placeholder="请选择(可搜索)">
            <el-option
              v-for="item in options"
              :key="item.dept"
              :label="item.label"
              :value="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="银行卡" prop="cashcardid">
          <el-input v-model="ruleForm.cashcardid" placeholder="请输入银行卡号"></el-input>
        </el-form-item>
        <el-form-item label="家庭地址" prop="teaadd">
          <el-input v-model="ruleForm.teaadd" placeholder="请输入家庭地址"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false,updateInfo()">确 定</el-button>
      </div>
    </el-dialog>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import "@/mock/Admin";
import Message from "@/plugins/message";
import $ from "jquery";
export default {
  data() {
    return {
      currentPage: 1, //初始页
      pagesize: 10, //    每页的数据
      userList: [],
      dialogFormVisible: false,
      formLabelWidth: "100px",
      tableData: [],
      secondData: [],
      searchName: "",
      multipleSelection: [],
      visible: false,
      dialogFormVisible: false,
      options: [
        {
          dept: "选项1",
          label: "信息科学与工程学院"
        },
        {
          dept: "选项2",
          label: "软件学院"
        },
        {
          dept: "选项3",
          label: "外国语学院"
        },
        {
          dept: "选项4",
          label: "数学学院"
        },
        {
          dept: "选项5",
          label: "物理学院"
        }
      ],
      ruleForm: {
        teaid: "",
        teaname: "",
        passwd: "",
        teatel: "",
        teasex: "",
        dept: "",
        cashcardid: "",
        teaadd: ""
      },
      rules: {
        teaid: [
          { required: true, message: "请输入工号", trigger: "blur" },
          { min: 6, max: 6, message: "长度为 6 个字符", trigger: "blur" }
        ],
        teaname: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 4, message: "长度为 2 到 4 个字符", trigger: "blur" }
        ],
        passwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 12, message: "长度为 6 到 12 个字符", trigger: "blur" }
        ],
        teasex: [{ required: true, message: "请选择性别", trigger: "change" }],
        teatel: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { min: 11, max: 11, message: "长度为 11 个字符", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.queryData();
  },
  methods: {
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    // handleUserList() {
    //     this.$http.get('http://localhost:3000/userList').then(res => {  //这是从本地请求的数据接口，
    //         this.userList = res.body
    //     })
    // },
    queryData: function() {
      let vm = this;
      let list = [];
      axios.post("/Admin/all").then(function(res) {
        const { code, msg, adminData } = res.data;
        // console.log(res.data);
        if (code === 0) {
          for (let i = 0; i < adminData.length; i++) {
            // console.log(adminData[i]);
            list.push(adminData[i]);
          }
          vm.tableData = list;
          vm.secondData = list;
        } else {
          Message.error("请求失败");
        }
      });
    },
    handleEdit(index, row) {
      this.ruleForm.teaid = row.teaid;
      this.ruleForm.teaname = row.teaname;
      this.ruleForm.teasex = row.teasex;
      this.ruleForm.teatel = row.teatel;
      this.ruleForm.passwd = row.passwd;
      this.ruleForm.dept = row.dept;
      this.ruleForm.cashcardid = row.cashcardid;
      this.ruleForm.teaadd = row.teaadd;
    },
    updateInfo: function() {
      console.log("wdwad");
      axios.post("Admin/update", { adminInfo: this.ruleForm }).then(res => {
        // console.log(this.ruleForm);
        const { code, msg, item } = res.data;
        const teaid = item.teaid;
        if (code === 0) {
          this.tableData.forEach(data => {
            if (data.teaid === teaid) {
              data.teaname = item.teaname;
              data.teasex = item.teasex;
              data.teatel = item.teatel;
              data.passwd = item.passwd;
              data.dept = item.dept;
              data.cashcardid = item.cashcardid;
              data.teaadd = item.teaadd;
            }
          });
          Message.success(msg);
        } else {
          Message.error("编辑失败");
        }
      });
    },
    handleDelete(index, row) {
      console.log(row.teaid);
      axios.post("Admin/del", { teaids: row.teaid }).then(res => {
        const { code, msg, adminData } = res.data;
        if (code === 0) {
          Message.success(msg);
          this.tableData.splice(index, 1);
        }
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    deleteBySelected: function() {
      let vm = this;
      var teaids = this.multipleSelection.map(item => item.teaid); //获取所有选中行的id组成的字符串，以逗号分隔
      console.log(teaids);
      axios.post("Admin/del", { teaids }).then(res => {
        const { code, msg, result } = res.data;
        console.log(res.data);
        if (code === 0) {
          for (let i = 0; i < result.length; i++) {
            for (let j = 0; j < vm.tableData.length; j++) {
              if (result[i] === vm.tableData[j].teaid) {
                vm.tableData.splice(j, 1);
              }
            }
          }
          Message.success(msg);
          // this.tableData = adminData;
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    query(searchName) {
      let search = this.searchName;
      this.tableData = this.secondData;
      this.tableData = this.tableData.filter(
        data =>
          data.teaname.toLowerCase().includes(search.toLowerCase()) ||
          data.teasex.toLowerCase().includes(search.toLowerCase()) ||
          data.dept.toLowerCase().includes(search.toLowerCase()) ||
          data.teaadd.toLowerCase().includes(search.toLowerCase()) ||
          data.teaid.toLowerCase().includes(search.toLowerCase())
      );
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    export2Excel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/vendor/Export2Excel");
        const tHeader = [
          "工号",
          "姓名",
          "性别",
          "账号密码",
          "电话",
          "单位",
          "银行卡号",
          "家庭地址"
        ];
        const filterVal = [
          "teaid",
          "teaname",
          "teasex",
          "passwd",
          "teatel",
          "dept",
          "cashcardid",
          "teaadd"
        ];
        const list = this.tableData;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "教师信息列表");
      });
    }
  }
};
</script>

<style scoped>
.info {
  position: relative;
}
.info .btn {
  width: 100%;
  /* border: 1px solid black; */
}
.info .btn .searchName {
  width: 250px;
}
.btn {
  display: flex;
  justify-content: space-between;
}
</style>